<template>
	<view class="new-item" @tap="toNewGoodsDetail">
		<view class="img-box">
			<image class="image" :src="item.pic" alt="" />
			<image class="tlj-flag" src="@/static/images/special/tlj-flag.png" />
			<view class="zero-flag">下单即是0元</view>
			<view class="mask" v-if="item.surplus === 0 || item.receiveStatus === 2 || this.item.status === 2 || ((parseFloat(item.endPrice) - parseFloat(item.tljMoney)) !== 0 )">
				<view class="circular-wrap">
					<view class="circular-inner">已抢完</view>
				</view>
			</view>
		</view>

		<view class="goods-content">
			<text class="goods-name">{{ item.title }}</text>
			<view class="coupon">领{{ item.couponMoney }}元券+淘礼金{{ item.tljMoney }}元</view>
			<view class="original">原价¥{{ item.price | fixed(2) }}</view>
			<view class="already">{{ item.sale | formatMyriadNum }}人已买</view>
			<view class="buy">
				<text v-if="item.surplus === 0 || item.receiveStatus === 2 || this.item.status === 2 || ((parseFloat(item.endPrice) - parseFloat(item.tljMoney)) !== 0 )">已抢完</text>
				<text class="text" v-else>0元抢购</text>
			</view>
		</view>

		<!-- 授权弹窗 -->
		<authorize ref="authorize"></authorize>
	</view>
</template>

<script>
	const Alibcsdk = uni.requireNativePlugin('UZK-Alibcsdk');
	import Authorize from '@/components/Authorize';
	import {
		mapGetters
	} from 'vuex';

	export default {
		name: 'NewItem',
		components: {
			Authorize
		},
		props: {
			item: {
				type: Object,
				default: () => {
					return {};
				}
			},
			newPerson: {
				type: Number
			}
		},
		computed: {
			...mapGetters(['userInfo', 'permInfo'])
		},
		methods: {
			// 跳转至新人商品详情
			toNewGoodsDetail() {
				uni.setStorageSync('newGoodsInfo', this.item);
				this.$Router.push({
					path: '/pages/goods/detail',
					query: {
						gid: this.item.gid,
						title: this.item.title,
						type: 'newGoods'
					}
				})
			},
			buyProduct() {
				if ((this.item.surplus === 0 || this.newPerson === 0 || this.item.receiveStatus === 2 || this.item.status === 2 || ((parseFloat(this.item.endPrice) - parseFloat(this.item.tljMoney)) !== 0 ) ) && this.item.hasBuy ===
					0) {
						if (this.item.surplus === 0 || this.item.receiveStatus === 2 || this.item.status === 2 || ((parseFloat(this.item.endPrice) - parseFloat(this.item.tljMoney)) !== 0 )) {
							uni.showToast({
								title: '哎呦，商品已抢完啦~',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '亲亲，您已经是老用户哦，去其他模块看看吧！',
								icon: 'none'
							})
						}
					return false;
				}
				if (this.item.hasBuy === 1) {
					uni.showLoading({
						title: '正在打开淘宝...'
					})
					setTimeout(() => {
						uni.hideLoading()
					}, 5000)
					Alibcsdk.init(
						initResult => {
							if (initResult.status) {
								Alibcsdk.openurl({
									url: 'https://uland.taobao.com/taolijin/edetail?eh=MVBlSwOLpreZuQF0XRz0iAXoB%2BDaBK5LQS0Flu%2FfbSp4QsdWMikAalrisGmre1Id0BFAqRODu130DmFF9DTRc0qrmqEHaWcIvqouUbJRhnH9u3lj%2BX5NNYgs22Axz3XOO9ATnZEBpwom6%2BnYR69RqUDE8fSUyGr7n5FnFhC%2B%2FyG3HR2hP0JFShnTd1arSbhlpse%2F8WKZgdqCuZP%2F3AvPjYxjXLlf72wXuXecy92p8l6MVhMWGS%2FvL%2BSaI0QWY29ddA5ONPuFT3XoDUqZhSc2iFliFT9x2zBdKW6I%2BwndXEP%2BO0s7EIRp1VVusqqnhify&union_lens=lensId%3A0b518cc4_0ced_172cb9063a7_d5fb%3Btraffic_flag%3Dlm&activityId=be0954369c274b579acb643cf4fc0fcd&relationId=2490857162'
								}, result => {});
							} else {
								uni.showToast({
									title: "初始化失败"
								});
							}
						})
					setTimeout(() => {
						this.close();
					}, 2000);
				} else {
					if (this.userInfo.tbStatus === 1) {
						uni.showModal({
							title: '确认选购本商品？',
							content: '亲,您只有一次新人免单机会，确认使用之后不可再更换选购其他免单商品哦！是否确认选购本商品？',
							cancelText: '考虑一下',
							confirmText: '确认使用',
							success: (res) => {
								if (res.confirm) {
									uni.showLoading({
										title: '正在打开淘宝...'
									})
									setTimeout(() => {
										uni.hideLoading()
									}, 5000)
									let params = {
										...this.item
									};
									this.$service.shopping.goods.newPersonBuy(params).then(resBuy => {
										Alibcsdk.init(
											initResult => {
												if (initResult.status) {
													Alibcsdk.openurl({
														url: resBuy,
													}, result => {});
												} else {
													uni.showToast({
														title: "初始化失败",
														icon: 'none'
													});
												}
											})
										this.close();
									}).catch(error => {
										uni.showToast({
											title: error.message,
											icon: 'none'
										});
									});
								}
							}
						});
					} else {
						if (this.userInfo.tbStatus === 2) {
							uni.showToast({
								title: '亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！',
								icon: 'none'
							});
						}
						if (this.userInfo.tbStatus === 3) {
							uni.showToast({
								title: '授权过期，请重新授权',
								icon: 'none'
							});
						}
						this.$refs.authorize.open();
					}
				}
			},
			close() {
				// 获取用户信息
				// #ifdef H5
				this.$store.dispatch('getUserInfo', { versionCode: 140 });
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
					let params = { ...wgtinfo };
					this.$store.dispatch('getUserInfo', params);
				});
				// #endif
				// 触发列表刷新
				this.$emit('refresh');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.new-item {
		display: flex;
		padding: 28rpx 26rpx;
		margin-bottom: 28rpx;
		background: #fff;
		border-radius: 20rpx;

		.img-box {
			width: 240rpx;
			height: 240rpx;
			margin-right: 14rpx;
			position: relative;
			overflow: hidden;

			.image {
				width: 100%;
				height: 100%;
			}
			
			.tlj-flag {
				position: absolute;
				width: 83rpx;
				height: 80rpx;
				left: 0;
				top: 0;
			}
			
			.zero-flag {
				width: 100%;
				line-height: 50rpx;
				position: absolute;
				bottom: 0;
				border-radius: 50rpx;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
				background: linear-gradient(305deg,rgba(199,40,195,1) 0%,rgba(235,41,107,1) 100%);
			}

			.account {
				position: absolute;
				top: 0;
				left: 0;
				padding: 0 16rpx;
				height: 34rpx;
				text-align: center;
				font-size: 20rpx;
				color: $color-white;
				background: linear-gradient(225deg, #ff2737, #ff6263);
				border-radius: 0 0 16rpx 0;

				.iconfont {
					font-size: 24rpx;
				}
			}

			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.2);
				@include flexBox(center, center);

				.circular-wrap {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					background: rgba(0, 0, 0, 0.3);
					transform: rotate(-24deg);
					@include flexBox(center, center);

					.circular-inner {
						width: 90rpx;
						height: 86rpx;
						border: 2rpx solid $color-white;
						border-radius: 50%;
						font-size: 18rpx;
						color: $color-white;
						@include flexBox(center, center);
					}
				}
			}
		}

		.goods-content {
			height: 240rpx;
			flex: 1;
			position: relative;
			@include flexBox(space-between, null, column);

			.goods-name {
				text-align: left;
				color: $text-black;
				font-size: 28rpx;
				@include ellipsis(2);
			}

			.coupon {
				width: fit-content;
				background: #ffe6e6;
				line-height: 44rpx;
				padding: 0 8rpx;
				border-radius: 50rpx;
				color: #f70114;
				font-size: 24rpx;
				transition: 0.3s;
			}
			
			.original {
				color: #b5b5b5;
				font-size: 24rpx;
				text-decoration: line-through;
			}
			
			.already {
				color: #F70114;
				font-size: 28rpx;
			}
			
			.buy {
				line-height: 56rpx;
				color: $color-white;
				font-size: 32rpx;
				border-radius: 50rpx;
				text-align: center;
				position: absolute;
				right: 0;
				bottom: 0;
				background: $main-color;
				padding: 0 20rpx;
			}
		}
	}
</style>
